import React, { Component } from 'react';
import axios from 'axios';
import moment from 'moment';
import { Menu, Dropdown, Button, Icon } from 'antd';


export default class BijiMenu extends Component{
    constructor(props){
        super(props);
        this.state = { bijis_count: 0, bijis_list: [], bijis_sort: 'earliest_created' };
    }

    get_biji_list = (bijis_sort) =>{
        let that = this;
        axios.get('/api/biji', { params: { bijis_sort: bijis_sort } })
            .then(function (response) {
                if(response.data.code == 200){
                    that.setState ({ bijis_count: response.data.biji_list.length, bijis_list: response.data.biji_list });
                }else{
                    //todo
                }
            })
            .catch(function (error) {
                console.log(error);
        });  
    }

    componentDidMount(){
        var that = this;
        this.get_biji_list(this.state.bijis_sort);
        // 订阅获取BijiMenuHead组件中的排序过后的笔记列表
        this.pubsub_token = PubSub.subscribe('bijis_sort', function (topic, message) {  
            this.setState({  
                bijis_sort: message  
            });
            that.get_biji_list(message);
        }.bind(this));
    }

    componentWillUnmount(){
        // 组件将要移除时取消订阅  
        PubSub.unsubscribe(this.pubsub_token);  
    }

    render(){
        return (
            <div>  
                <BijiMenuHead bijis_count = { this.state.bijis_count }/>
                <div className="underline"></div>
                <BijiMenuList bijis_list = { this.state.bijis_list }/>
            </div>
        );
    }
}

export class BijiMenuHead extends Component{
    constructor(props){
        super(props);
        this.state = { bijis_sort: 'earliest_created' };
    }

    bijis_sort = (event) =>{
        this.setState({ bijis_sort: event.target.getAttribute("data-item") },()=>{
            PubSub.publish('bijis_sort', this.state.bijis_sort);
        });
    }

    render(){
        const menu = <Menu>
                        <Menu.Item>
                            <a onClick={ this.bijis_sort } data-item="earliest_created">创建日期（最早优先）</a>
                        </Menu.Item>
                        <Menu.Item>
                            <a onClick={ this.bijis_sort } data-item="newest_created">创建日期（最新优先）</a>
                        </Menu.Item>
                        <Menu.Item>
                            <a onClick={ this.bijis_sort } data-item="earliest_updated">更新日期（最早优先）</a>
                        </Menu.Item>
                        <Menu.Item>
                            <a onClick={ this.bijis_sort } data-item="newest_updated">更新日期（最新优先）</a>
                        </Menu.Item>
                        <Menu.Item>
                            <a onClick={ this.bijis_sort } data-item="asc_title">标题（升序排序）</a>
                        </Menu.Item>
                        <Menu.Item>
                            <a onClick={ this.bijis_sort } data-item="desc_title">标题（降序排序）</a>
                        </Menu.Item>
                    </Menu>;
        return (
            <div className="biji-menu-title">
                <p>笔记</p>
                <div className="biji-menu-desc">
                    <span>{ this.props.bijis_count }条笔记</span>
                    <Dropdown overlay={ menu }>
                        <Button>
                         选项 <Icon type="down" />
                        </Button>
                    </Dropdown>
                </div>
            </div>
        );
    }
}

export class BijiMenuList extends Component{
    constructor(props){
        super(props);
    }

    render(){
        let bijis_list = this.props.bijis_list.map((data)=> (
            <div className="biji-menu-list" key={ data.biji_id }>
                <div className="biji-list-title">
                    <span className="title">{ data.biji_title }</span>
                    <span className="time">{ moment(data.updated_time).format('YYYY-MM-DD') }</span>   
                </div>
                <div className="biji-list-desc">
                    { data.biji_content }
                </div>
            </div>
        ));
        return(
            <div className="menu-list">{ bijis_list }</div>
        );
    }
}